<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业</title>
    <style>
      #vcode {
        height: 20;
        width: 10%;
      }
      #code {
        height: 20;
        width: 10%;
        color: #ffffff;
        /*字体颜色白色*/
        background-color: #000000;
        font-family: "华康娃娃体W5";
        padding: 5px 35px 10px 15px;
      }
      #search_pass_link {
        width: 70%;
        text-align: right;
        margin: 0 auto;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <form action="../data.html" method="get">
      <span style="color: rgb(8, 0, 255)">欢迎注册会员</span><br />
      <label for="phone">手机号码：</label
      ><input
        type="text"
        id="phone"
        name="phone"
        placeholder="11位手机号码"
      /><br />
      <label for="pwd">创建密码：</label
      ><input
        type="password"
        id="pwd"
        name="pwd"
        maxlength="8"
        placeholder="长度8个字符"
      /><br />
      <label for="eamil">注册邮箱：</label
      ><input
        type="text"
        id="eamil"
        name="eamil"
        placeholder="可用的邮箱地址"
      /><br />
      验证码：
      <div class="main_bar">
          <input
            type="text"
            id="vcode"
            placeholder="验证码"
            value="验证码"
            onfocus="this.value=''"
            onblur="if(this.value=='')this.value='验证码'"
          /><span id="code" title="看不清，换一张"></span>
          <div id="search_pass_link"></div>
      </div>
      <br />
      性别：
      <label>
        <input type="radio" name="sex" value="male" checked="checked" /> 男
      </label>
      <label> <input type="radio" name="sex" value="female" /> 女 </label><br />
      <label for="mydate">
        生日：<input type="date" id="mydate" name="mydate" /></label
      ><br />
      <label for="age">年龄：</label
      ><input type="text" id="age" name="age" /><br />
      籍贯：
      <select></select
      >省
      <select></select
      >市
      <select></select
      >区/县
      <script src="city.js"></script>
      <script src="cascading.js"></script>
      <br />
      个人学位：
      <select name="collage" id="collage" size="1">
        <option value="collage">博士后</option>
        <option value="collage">博士</option>
        <option value="collage">硕士</option>
        <option value="collage">学士</option></select
      ><br />
      月薪:
      <input
        type="range"
        id="money"
        name="money"
        min="5"
        max="100"
        step="1"
        value="10"
      />
      <span id="msg"></span>k
      <br />
      个人爱好：<label>
        <input type="checkbox" name="like" value="football" />唱
      </label>
      <label>
        <input type="checkbox" name="like" value="basketball" />跳
      </label>
      <label> <input type="checkbox" name="like" value="football" />rap </label>
      <label>
        <input type="checkbox" name="like" value="basketball" />篮球 </label
      ><br />
      个人照片：
      <p></p>
      <div
        id="test-image-preview"
        style="
          border: 1px solid silver;
          width: 15%;
          height: 200px;
          background-repeat: no-repeat;
          background-position: center;
        "
      ></div>
      <p></p>
      <p>
        <input type="file" id="test-image-file" name="test" />
      </p>
      <p id="test-file-info">没有选择文件</p>
      个人简历：<br />
      <textarea name="intro" cols="50" rows="10">请填写个人简历</textarea><br />
      <!-- <input type="submit" id="submit" value="确定" class="btns" /> -->
      <button type="submit"> 提交 </button>
      <button type="reset">重填</button>
    </form>
  </body>
  <script>
    var msg = document.getElementById("msg"); // 根据id值找到span元素
    window = function () {
      msg.innerHTML = document.getElementById("money").value; // 获取区间域初始value值
    };
    document.getElementById("money").onchange = function () {
      msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
    };
  </script>
  <script>
    var fileInput = document.getElementById("test-image-file");
    var info = document.getElementById("test-file-info");
    var preview = document.getElementById("test-image-preview");
    fileInput.addEventListener("change", function () {
      // 监听change事件
      preview.style.backgroundImage = ""; // 清除背景图片
      if (!fileInput.value) {
        info.innerHTML = "没有选择文件";
        return;
      }
      var file = fileInput.files[0]; // 获取File引用
      // 获取File信息:
      info.innerHTML =
        "文件: " +
        file.name +
        "<br>" +
        "大小: " +
        file.size +
        "<br>" +
        "修改: " +
        file.lastModifiedDate;
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        alert("不是有效的图片文件!");
        return;
      }
      var reader = new FileReader(); // 读取文件
      reader.onload = function (e) {
        // 发起一个异步操作来读取文件内容
        var data = e.target.result; // data串形如： '...(base64编码)...'
        preview.style.backgroundImage = "url(" + data + ")";
      };
      reader.readAsDataURL(file); // 以DataURL的形式读取文件
    });
  </script>
  <script type="text/javascript">
    var code; //声明一个变量用于存储生成的验证码
    document.getElementById("code").onclick = changeImg;
    function changeImg() {
      var arrays = new Array(
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "0",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "j",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      code = ""; //重新初始化验证码
      //alert(arrays.length);
      //随机从数组中获取四个元素组成验证码
      for (var i = 0; i < 4; i++) {
        //随机获取一个数组的下标
        var r = parseInt(Math.random() * arrays.length);
        code += arrays[r];
      }
      document.getElementById("code").innerHTML = code; //将验证码写入指定区域
    }

    //效验验证码(表单被提交时触发)
    function check() {
      //获取用户输入的验证码
      var input_code = document.getElementById("vcode").value;
      // if (input_code.toLowerCase() == code.toLowerCase()) {
      //   //验证码正确(表单提交)
      //   return true;
      // }
      // alert("请输入正确的验证码!");
      // //验证码不正确,表单不允许提交

      // return false;
    }
  </script>
</html>
